<template>
  <div class="top-part">
    <div class="question-title">
      <router-link :to="`/app/question_answer/${question.question_id}`">{{question.question_title}}</router-link>
    </div>
    <div v-if="question.answer_id" class="answer-part">
      {{question.answer_user_nickname}}：{{question.answer_text}}
    </div>
  </div>
  <div v-if="question.answer_id">
    <AnswerOptionLine :answer="question"></AnswerOptionLine>
  </div>
  <div v-else class="no-answer-tag">问题暂无回答，快来写下你的想法吧~</div>
</template>

<script>
import {ref} from 'vue'
import AnswerOptionLine from "@/components/AnswerOptionLine";
export default {
  name: "QACard",
  components: {AnswerOptionLine},
  props: {
    question: {
      type: Object,
      default: {
        question_id: 0, // 问题id
        question_title: "question_title", // 问题标题
        answer_user_nickname: "user_nickname", // 高赞回答的用户昵称
        answer_text: "answer_text",      // 回答的内容的text形式（即不是html形式）
        // 以下参数传给AnswerWrapper
        answer_id: 0,     // 高赞回答id
        thumb_up: 99,     // 回答点赞数
        comment_num: 99,  // 回答评论数
        collect_num: 99,  // 回答收藏数
        is_thumb_up: "0", // 登录用户是否已点赞
        is_collect: "0",  // 登录用户是否已收藏
      }
    }
  },
  setup(props) {

  }
}
</script>

<style scoped lang="scss">
@import "src/assets/scss/common";

.top-part {
  padding: 20px 20px 0;
  .question-title {
    font-size: 20px;
    line-height: 1.5;
    font-weight: bold;
    a {
      color: black;
      &:hover {
        color: #006dcc;
      }
    }
  }
  .answer-part {
    margin-top: 10px;
    line-height: 1.5;
    color: #404040;
    text-align: justify;
    // 只显示前三行，多于三行显示为...
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;/*超出3行部分显示省略号，去掉该属性 显示全部*/
    -webkit-box-orient: vertical;
  }
}
.no-answer-tag {
  padding: 10px 20px 20px;
  color: #e6a23c;
}
</style>
